<template>
    <div class="doctorcom">
        <div class="items">
            <ul>
                <li @click="changeItem('doctor')">隆鼻圣手桂海伟</li>
                <li @click="changeItem('project')">华南鼻天王陈平绪</li>
            </ul>
        </div>
        <div class="clear"></div>
        <component :is="curCom"></component>
    </div>
</template>
<script>
import Project from "./Project";
import Doctor from "./Doctor";
export default {
  name: "doctorcom",
  data() {
    return {
      curCom: "Doctor"
    };
  },
  components: {
    Project,
    Doctor
  },
  methods: {
    changeItem(name) {
      this.curCom = name;
    }
  }
};
</script>
<style lang="scss" scoped>
.doctorcom {
  padding: 10px;
  .title {
    font-size: 16px;
    line-height: 20px;
    margin: 20px;
  }
  .clear {
    clear: both;
  }
  .items {
    ul {
      border: 0.5px solid black;
      li {
        line-height: 30px;
        float: left;
        padding: 10px;
        border-left: 1px solid black;
      }
    }
  }
}
</style>
